<template lang="pug">
ECharts.line-chart(
  ref="echarts"
  :options="options"
  auto-resize)
</template>

<script>
/**
 * @name LineBarChart 折线或柱状图
 * @author caixq&wangrf
 * @description 展示类目折线图
 */
export default {
  name: 'LineTable',
  props: {
    series: {
      type: Array,
      default: () => ([])
    },
    xAxis: {
      type: Array,
      default: () => ([])
    },
    yAxisName: {
      type: String,
      default: ''
    },
    legendData: {
      type: Array,
      default: () => ([])
    },
    userName: {
      type: String,
      default: ''
    },
    isLine: {
      type: Boolean,
      default: true
    }
  },
  computed: {
    options () {
      return {
        color: ['#0000EE', '#CD0000', '#CD6600'],
        ...this.lineData,
        // legend: {
        //   ...this.lineData.legend,
        //   data: this.legendData
        // },
        // title: {
        //   ...this.lineData.title,
        //   text: this.userName
        // },
        xAxis: {
          ...this.lineData.xAxis,
          boundaryGap: !this.isLine,
          data: this.xAxis
          // data: this.xAxis.map((item) => {
          //   return this.$moment(item, 'x').format('HH:mm')
          // })
        },
        yAxis: {
          ...this.lineData.yAxis,
          name: this.series.map((item) => item.name)[0] ? (this.series.map((item) => item.name)[0] + (this.series.map((item) => item.unit)[0] ? ('(' + this.series.map((item) => item.unit)[0] + ')') : '')) : ''
          // name: this.series.unit
        },
        series: this.series.map((item) => {
          return {
            ...item,
            smooth: true,
            type: this.chartType,
            markPoint: {
              symbolSize: 1,
              symbolOffset: [0, '50%'],
              label: {
                normal: {
                  offset: [0, -15],
                  formatter: ({seriesName, name, value}) => {
                    return `${seriesName}${name}：${(value).toFixed(3) + ' ' + this.series.map((item) => item.unit)}`
                  },
                  backgroundColor: 'rgba(0,0,0,0.7)',
                  borderRadius: 15,
                  padding: [4, 10],
                  lineHeight: 15,
                  height: 15,
                  distance: 20,
                  color: '#fff',
                  textBorderColor: '#000',
                  textBorderWidth: 1,
                  fontSize: 12,
                  fontWeight: 'bold',
                  fontFamily: 'Microsoft YaHei'
                }
              },
              data: [
                {type: 'max', name: '最大值'},
                {type: 'min', name: '最小值'}
              ]
            }
          }
        }),
        legend: {
          x: 'center',
          y: '94%',
          itemWidth: this.legendWidth,
          data: this.series.map((item) => item.name)
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            snap: true,
            label: {
              show: false
            },
            type: 'cross'
          },
          textStyle: {
            fontSize: 12,
            fontWeight: 'bold',
            fontFamily: 'Microsoft YaHei'
          },
          formatter: (param) => {
            return param[0].name + '<br> &nbsp;' + param[0].marker + param[0].seriesName + '：' + (param[0].value || param[0].value === 0 ? parseFloat(param[0].value).toFixed(3) : '-') + ' ' + this.unit
          }
          // formatter: (params, a, b, c) => {
          //   console.log(a)
          //   console.log(b)
          //   console.log(c)
          //   console.log('params', params)
          //   this.transFormatter(params)
          // }
        }
      }
    },
    chartType () {
      return this.isLine ? 'line' : 'bar'
    },
    legendWidth () {
      return this.isLine ? 28 : 14
    },
    unit () {
      return this.series.map((item) => item.unit)
    }
  },
  data () {
    return {
      data: [],
      // 折线图的配置项和数据
      lineData: {
        title: {
          left: 'center',
          text: ''
        },
        dataZoom: [
          {
            show: true,
            realtime: true,
            y: '86%',
            start: 0,
            end: 100
          },
          {
            type: 'inside',
            realtime: true,
            start: 0,
            end: 100
          }
        ],
        legend: {
          data: [],
          x: 'center',
          y: '94%'
        },
        series: [],
        xAxis: {
          name: '',
          type: 'category',
          boundaryGap: false,
          axisLabel: {
            show: true,
            align: 'center'
          },
          min: 'dataMin',
          max: 'dataMax'
        },
        yAxis: {
          name: '',
          type: 'value'
        },
        grid: {
          show: true,
          left: 50,
          right: 12,
          height: '65%'
        }
      },
      unitStr: ''
    }
  },
  methods: {
    transFormatter (params) {
      this.$emit('receiveParams', params)
    }
  },
  watch: {
    series (val) {
    }
  }
}
</script>

<style lang="sass" scoped>
.line-chart
  width: 100%
  height: 100%
</style>
